﻿<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>

</head>
<body>

    <h1>天气查询</h1>

    <select id="tel">
        <option>北京</option>
        <option>上海</option>
        <option>贵阳</option>
        <option>昆明</option>
    </select>
    <p><span id="reslut"></span></p>

    <script src="jquery-1.7.2-min.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#tel').change(function () {
                $.ajax({
                    type: 'GET',
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'getName',
                    url: 'http://api.asilu.com/weather/',
                    data: {
                        "city": $('#tel').val()
                    },
                    success: function (reslutData) {

                        $('#reslut').text("你查询的是:" + reslutData.city + "," + "明天的天气是:" + reslutData.weather[0].weather + "温度是:" + reslutData.weather[0].temp + "后天是：" + reslutData.weather[1].weather + "温度是:" + reslutData.weather[1].temp);
                    }
                })
            })

        })

    </script>
</body>
</html>
